<template>
  <transition name="modal-fade">
  <div v-if="visible" class="modal-overlay" @click.self="close">
    <div class="modal" :style="modalStyle">
      <div v-if="titleHeader" class="title" @mousedown="startDragging">
        <span class="close-btn" @click="close">X</span>
      </div>
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</transition>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    "title-header": {
      // 是否全屏显示
      type: Boolean,
      default: true,
    },
    fullscreen: {
      type: Boolean,
      default: false,
    }
  },
  watch: {
    fullscreen() {
      this.updateModalStyle();
    },
  },
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0,
      modalStyle: {},
    };
  },
  methods: {
    close() {
      // this.$emit("close");
    },
    startDragging(event) {
      this.isDragging = true;
      this.startX = event.clientX - this.modalStyle.left;
      this.startY = event.clientY - this.modalStyle.top;
      document.addEventListener("mousemove", this.doDrag);
      document.addEventListener("mouseup", this.stopDragging);
    },
    doDrag(event) {
      if (this.isDragging) {
        const x = event.clientX - this.startX;
        const y = event.clientY - this.startY;
        this.modalStyle = { left: `${x}px`, top: `${y}px` };
      }
    },
    stopDragging() {
      this.isDragging = false;
      document.removeEventListener("mousemove", this.doDrag);
      document.removeEventListener("mouseup", this.stopDragging);
    },
    updateModalStyle() {
      if (this.fullscreen) {
        this.modalStyle = {
          left: "0",
          top: "0",
          width: "100%",
          height: "100%",
        };
      } else {
        this.modalStyle = {
          left: "auto",
          top: "auto",
          width: "auto",
          height: "700px",
        }; // 默认居中显示
      }
    },
  },
  mounted() {
    this.updateModalStyle(); // 初始化样式设置
  },
};
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000; 
}
.modal {
  position: absolute; 
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  min-width: 300px; /* 可以根据需要调整 */
  height: 100%;
}
.content {
  height: 100%;
}
.title {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  border-bottom: 1px solid #e1e1e1;
}
.close-btn {
  cursor: pointer;
}
.modal-fade-enter-active{
    animation: identifier 0.1s linear;
}
.modal-fade-leave-active{
    animation: identifier 0.1s linear reverse;
}
 
@keyframes identifier {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
</style>
